<template>
	<view class="promotion-container">
		<view class="material-card">
			<view class="material-grid">
				<view class="material-item" v-for="(product, index) in favoritesList" :key="index"
					@click="toProductDetail(product)">
					<image :src="$tools.buildUrl(product.white_back_ground_pic_url)" class="material-image"
						mode="aspectFill" />
					<view class="material-info">
						<text class="material-title">{{ product.spu_name }}</text>
						<text class="material-type">{{ product.group_name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelectMode: false, // 是否为选择地址模式
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				favoritesList: []
			}
		},
		onLoad(options) {
			// 如果是选择地址模式
			if (options.type === 'select') {
				this.isSelectMode = true
			}
			this.onSearch();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.favoritesList = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			// 重新重新事件
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.favoritesList = []
				this.loadDataList()
			},
			loadDataList() {
				// 加载用户收藏内容
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				this.$api.user.GetFavoritesList({
					page: this.page,
					limit: this.limit,
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.favoritesList = this.favoritesList.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 跳转到商品详情
			toProductDetail(product) {
				if (product.type_id === 1) {
					uni.navigateTo({
						url: `/pages/product/detail?id=${product.data_id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 通用卡片样式 */
	.link-card,
	.qrcode-card,
	.material-card,
	.record-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.refresh-btn {
		background: none;
		border: none;
		padding: 0;
		font-size: 24rpx;
	}

	.refresh-icon {
		font-size: 24rpx;
	}

	.more-link {
		font-size: 24rpx;
		color: #52a58a;
	}

	.material-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.material-item {
		border: 1rpx solid #f0f0f0;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.material-image {
		width: 100%;
		height: 200rpx;
	}

	.material-info {
		padding: 20rpx;
	}

	.material-title {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.material-type {
		font-size: 22rpx;
		color: #999;
	}

	.material-actions {
		display: flex;
		padding: 0 20rpx 20rpx;
		gap: 16rpx;
	}

	.material-btn {
		flex: 1;
		background-color: #52a58a;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 12rpx 0;
		font-size: 24rpx;
	}
</style>